Bootstrap
est un plugin qui vous permet d’
enrichir visuellement, d’embellir
votre cours à l’aide de
composants
ou
templates simples et personnalisables.
Étape 1
: Le plugin est disponible à partir de
l’éditeur de texte de Moodle
(l’éditeur utilisé par défaut TinyMCE) via l’icône Le plugin est disponible à partir de
l’éditeur de texte de Moodle
(l’éditeur utilisé par défaut TinyMCE) via l’icône
is-success
Les composants Bootstrap
peuvent être ajoutés à partir de toutes les activités ou ressources de Moodle, du moment où l’
éditeur de texte est présent
*
.
Dans une
ressource
type
Zone de texte et média
( anciennement Etiquette)
Dans le
champ Description
d’une
section
, de l’activité
Devoir
ou
Test
etc.
*
Les composants HTML
sont utilisables dans la description ou les messages des forums, ils sont visibles dans l'espace de cours, en revanche
ils ne s'affichent pas correctement
dans
les notifications envoyées sur les boîtes mails UCA.
is-danger
Le plugin Bootstrap n’est pas disponible pour l’éditeur Atto.
Plusieurs
composants html
sont actuellement disponibles sur la plateforme Moodle de l’UCA:
Étape 2
: Le composant
bouton
permet
d’afficher un certain nombre de boutons
(qui par défaut ce sont des boutons avec des liens hypertexte/URL).
Les boutons peuvent être de différents types :
Information
Avertissement
Succès
Erreur / Danger
Information principale
Information secondaire
Dark
Pour
ajouter un composant Bouton
:
Ouvrez l’éditeur de texte
(à partir de la ressource de votre choix : Etiquette, le champ Description dans les paramètres de la Section, de l’activité Forum, de l’activité Devoir etc.)
Cliquez sur
Insérer des composants html
(pensez à ouvrir la barre d’outils de l’éditeur de texte)
Dans le menu
Composant
sélectionnez
Bouton
Renseignez ensuite
Le
nombre de boutons
souhaités
Le
Type des boutons
(Information, Avertissement, Succès, Erreur / Danger, Information principale, Information secondaire, Dark)
Le Style des boutons
Plein
ou
Contour
La
Taille des boutons
:
Petit
–
Normal
–
Large
ou
Bloc
Ajouter un tooltip (info-bulle) :
Oui
ou
Non
Si oui, un message sera affiché lorsqu’on survole le bouton.
Le message par défaut est
Tooltip on the button
. Il est possible de le modifier à partir du code source HTML. Pour cela :
Ouvrez le code source à partir de l’éditeur de texte
Dans le code HTML remplacez le texte
Tooltip on the button
avec votre propre texte
Cliquez à la fin sur
mettre à jour
Choisissez le positionnement de l’info-bulle :
au-dessus/ à droite / en-dessous/ à gauche
5. Cliquez ensuite sur
Insérer
6.
Vous pouvez
à présent
personnaliser le contenu des boutons :
positionnez le curseur de votre souris au milieu du texte présent par défaut
Ceci empêchera les éventuels problèmes d’édition.
Saisissez ensuite votre propre texte
Pour renvoyer depuis les boutons vers des liens URL
Clic droit sur le texte du bouton
Sélectionnez ensuite
Insérer/éditer le lien et renseignez les différents champs
(URL du lien, Cible)
.
7. N’oubliez pas d’
enregistrer
à la fin la ressources à partir de laquelle vous avez ajouté le composant.
Étape 3 :
Ce composant permet d’
afficher
et de
mettre en évidence une information
ou
un message important
par exemple.
Plusieurs types d’alerte sont disponibles :
Information (bleu)
Avertissement (jaune)
Succès (vert)
Danger / Erreur (rouge)
Information principale (bleu UCA)
Information secondaire (gris)
Dark (noir)
Pour
ajouter un composant Alerte
:
Ouvrez l’éditeur de texte
(à partir de la ressource de votre choix : Etiquette, le champ Description d’une section, ou d’un forum, ou d’un devoir etc.)
Cliquez sur
Insérer des composants html
(pensez à ouvrir la barre d’outils de l’éditeur de texte)
Choisissez dans la liste
Alerte
, puis choisissez
le type d’alerte
Information, Avertissement, Succès, Danger / Erreur, Information principale Information secondaire, Dark.
Un aperçu du type d’alerte choisi est affiché dans la partie
Aperçu
4.
Vous pouvez
Permettre la fermeture de l’alerte.
Si vous cochez
Oui
, un bouton permettant la fermeture de l’alerte sera ajouté. Dès que l’étudiant a consulté l’alerte, il peut la fermer.
Si vous cochez
Non
, le composant alerte sera affiché en permanence (jusqu’à sa suppression)
5. Cliquez ensuite sur
Insérer
6. Vous pouvez à présent renseigner
le contenu de votre alerte
(remplacez le texte présent par défaut avec votre propre texte
)
7. N’oubliez pas d’
enregistrer
à la fin la ressources à partir de laquelle vous avez ajouté le composant.
Étape 4
:
Le composant
Citation
permet d’ajouter un énoncé avec une mise en page spécifique (texte en couleur, police en italique et le texte encadré par des guillemets).
Pour
ajouter un composant Citation
:
1.Ouvrez l’éditeur de texte
(à partir de la ressource de votre choix : Etiquette, le champ Description dans les paramètres de la Section, de l’activité Forum, de l’activité Devoir etc.)
2.Cliquez sur
Insérer des composants html
(pensez à ouvrir la barre d’outils de l’éditeur de texte)
3.Dans le menu
Composant
sélectionnez
Citation
4.Cliquez ensuite sur
Insérer
5.Vous pouvez
à présent
saisir le texte souhaité
dans le contenu de la citation :
- Remplacez le texte présent par défaut avec votre propre texte
6.N’oubliez pas d’
enregistrer
à la fin la ressources à partir de laquelle vous avez ajouté le composant.
Étape 5 :
Le composant
icône
permet
d’associer une image (une icône) aux informations
que vous pouvez ajouter dans la description d’une section, dans une étiquette etc.
Pour
ajouter un composant Icône
:
Ouvrez l’éditeur de texte
(à partir de la ressource de votre choix : Etiquette, le champ Description dans les paramètres de la Section, de l’activité Forum, de l’activité Devoir etc.)
Cliquez sur
Insérer des composants html
(pensez à ouvrir la barre d’outils de l’éditeur de texte)
Dans le menu
Composant
sélectionnez
Icône
Renseignez ensuite
le nom de l’icône
Pour trouver le nom des icônes :
Cliquez sur Retrouvez les différentes icônes Material compatibles
ici
.
Dans la fenêtre qui s’ouvre,
sélectionnez l’cône de votre choix
et ensuite dans le menu à droite
copiez le nom de l’icône
(2
ème
rectangle)
Revenez ensuite sur la fenêtre Choix du composant et collez le nom de l’icône
5.Vous pouvez
définir
également
la taille de l’icône
6.Cliquez ensuite sur
Insérer
7.
Vous pouvez à présent
ajouter votre texte
(
avant ou après l’intitulé de l’icône
) et le personnaliser en utilisant les outils de l’éditeur de texte
8.N’oubliez pas d’
enregistrer
à la fin la ressources à partir de laquelle vous avez ajouté le composant.
Étape 6 :
Le
jumbrotron
permet
d’afficher un bloc d’informations
et
d’attirer l’attention visuellement sur ces informations.
Pour
ajouter un composant Jumbrotron
:
Ouvrez l’éditeur de texte
(à partir de la ressource de votre choix : Etiquette, le champ Description dans les paramètres de la Section, de l’activité Forum, de l’activité Devoir etc.)
Cliquez sur
Insérer des composants html
(pensez à ouvrir la barre d’outils de l’éditeur de texte)
Dans le menu
Composant
sélectionnez
Jumbrotron
4. Ensuite cliquez sur
Insérer
5. Vous pouvez
à présent
saisir le texte souhaité
dans le contenu du jumbrotron. Pour cela :
remplacez le texte présent par défaut avec votre propre texte
6. N’oubliez pas d’
enregistrer
à la fin la ressources à partir de laquelle vous avez ajouté le composant.
Étape 7 :
Le composant
Menu navigation
permet d’afficher en-tête un ensemble de boutons avec liens URL.
Pour
ajouter un composant Menu navigation
:
Ouvrez l’éditeur de texte
(à partir de la ressource de votre choix : Etiquette, le champ Description dans les paramètres de la Section, de l’activité Forum, de l’activité Devoir etc.)
Cliquez sur
Insérer des composants html
(pensez à ouvrir la barre d’outils de l’éditeur de texte)
Sélectionnez
Menu navigation
dans le menu
Composant
Renseignez ensuite
le nombre de liens
que vous souhaitez
afficher dans le menu de navigation
5. Cliquez ensuite sur
Insérer
6.Vous pouvez
à présent
saisir et insérer les liens URL souhaités
dans le contenu du menu de navigation
Positionnez-vous dans
la zone de texte Tabs#1 (ou Tabs#2, Tabs#3 etc.)
et écrivez l’intitulé souhaité pour ce premier bouton du menu navigation
Allez ensuite sur
le bouton Insérer / éditer un lien
Dans la fenêtre pop-up qui s’ouvre,
collez le lien URL
vers lequel vous souhaitez envoyer les étudiants depuis le menu de navigation,
sélectionnez
dans
le menu Cible
–
Ouvrir dans une nouvelle fenêtre
et cliquez ensuite sur
Mettre à jour
7.N’oubliez pas d’
enregistrer
à la fin la ressources à partir de laquelle vous avez ajouté le composant.
Étape 8 :
Le composant
timeline
permet d’insérer une frise chronologique ou de représenter une temporalité par exemple.
Exemple 1 :
Exemple 2 :
Pour
ajouter un composant Timeline
:
Ouvrez l’éditeur de texte
(à partir de la ressource de votre choix : Etiquette, le champ Description dans les paramètres de la Section, de l’activité Forum, de l’activité Devoir etc.)
Cliquez sur
Insérer des composants html
(pensez à ouvrir la barre d’outils de l’éditeur de texte)
